<template>
  <div class="out_line_warpper">
    <a-anchor
      :affix="false"
      :getContainer="() => getElement()"
      wrapperClass="out_line_anchor_warpper"
      @click="handleAnchor"
    >
      <template v-for="item in contentList" :key="item.id">
        <a-anchor-link
          :href="`#anchor-basic-${item.questNum}`"
          :title="`${item.questNum}.${matchReg(item.title)}`"
        />
      </template>
    </a-anchor>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
  components: {},
  props: {
    /** 题列表 */
    contentList: { type: Array, default: () => [] },
  },
  emits: [
    /** 点击锚点 */
    'handleAnchor',
  ],
  setup(props, { emit }) {
    const handleAnchor = (e: Event, link: string) => {
      e.preventDefault();
      emit('handleAnchor', e, link);
    };

    const getElement = () => {
      return document.getElementById('quest_content');
    };
    // console.log(getElement());

    const matchReg = (value: string) => {
      const reg = /<\/?.+?\/?>/g;
      return value.replace(reg, '');
    };
    return { handleAnchor, getElement, matchReg };
  },
});
</script>
<style lang="less" scoped>
.out_line_anchor_warpper {
  overflow-y: scroll;
  height: calc(100vh - 150px);
}
</style>
